<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			/*设置外层的容器*/
			.nav{
				width: 100%;
			}
			/*设置每一行的容器*/
			.nav-inner{
				display: flex;
				/*设为弹性容器，让元素水平排列*/
				justify-content: space-around;
				text-align: center;
				
			}
			
			.item{
				width: 18%;
				/*background-color: #bfa;*/
				flex: auto;

			}
			.item img{
				/*设置图片宽度和父元素宽度一致*/
				width: 100%;
				margin-bottom: 2px;
			}
			
			.item a{
				text-decoration: none;
				color: #333;
				font-size: 16px;
				
			}
			
			
		</style>
	</head>
	<body>
		<nav class="nav">
			<div class="nav-inner">
				
				<div class="item">
					<a href="#">
						<img src="img/1.png"/>
						<span>天猫</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/2.png"/>
						<span>聚划算</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/3.png"/>
						<span>天猫国际</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/4.png"/>
						<span>外卖</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/5.png"/>
						<span>天猫超市</span>
					</a>
					
				</div>
			</div>
			
			<div class="nav-inner">
				
				<div class="item">
					<a href="#">
						<img src="img/6.png"/>
						<span>充值中心</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/7.png"/>
						<span>飞猪旅行</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/8.png"/>
						<span>领金币</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/9.png"/>
						<span>拍卖</span>
					</a>
					
				</div>
				
				<div class="item">
					<a href="#">
						<img src="img/10.png"/>
						<span>分类</span>
					</a>
					
				</div>
			</div>
		</nav>
	</body>
</html>
